<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Test Validator</title>
<script language="javascript" type="text/javascript" src="validator.js" lang="en"></script>
<style>
body, td {
	font-family: Arial;
	font-size: 10pt;
}
</style>
</head>
<body>
<form method="post" action="" class="auto_check">
<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center" valign="top"><p><strong>Demo/Test Validator, validator.js  by Sergey Shuchkin, <a href="mailto:shuchkin@mail.ru">shuchkin@mail.ru</a><br />
Uses attributes: &quot;class&quot; and &quot;title&quot;, to setup validation params</strong><em><br />
</em></p></td>
</tr>
<tr>
<td><b>Your password</b><br /></td>
<td><input type="password" name="password" class="req is_password pass_conf=confirmation pass_len=6 pass_chars=0-9" title="Your Password"/></td>
</tr>
<tr>
<td colspan="2"><font color="#006699">req isPassword passConf=pass_confirmation passLen=6 passChars=0-9</font><font color="#006699" size="1"><br />
</font></td>
</tr>
<tr>
<td><b>Password confirmation</b><br />
<font color="#006699">req minlen=6 </font></td>
<td><input type="password" name="confirmation" class="req minlen=6" /></td>
</tr>
<tr>
<td>E-mail<br />
<font color="#006699">isEmail</font></td>
<td><input name="user_email" type="text" class="textbox is_email" id="user_email" title="User E-mail"/></td>
</tr>
<tr>
<td>Test  min length<br />
<font color="#006699">minlen=2</font></td>
<td><input name="user_first_name" type="text" class="textbox minlen=2" id="user_first_name" title="User First Name"/></td>
</tr>
<tr>
<td>Test  Max length (Size) <br />
<font color="#006699">maxlen=3</font></td>
<td><input name="user_max_len" type="text" class="textbox maxlen=3" id="user_max_len" title="Test Max Length"/></td>
</tr>
<tr>
<td><b>Radio Gender</b><br />
<font color="#006699">required</font></td>
<td><input name="user_gender" type="radio" value="1" class="required" title="Gender" />
Male
<input name="user_gender" type="radio" value="2" />
Female</td>
</tr>
<tr>
<td><b>Your Month</b><br />
<font color="#006699">required</font><em><br />
</em></td>
<td><select name="select" class='textbox required' title="Month">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
also may be added <em>default=xx</em></td>
</tr>
<tr>
<td>Integer number (-60 to 30)<br />
<font color="#006699">isInt min=-60 max=30</font> </td>
<td><input type="text" name="test_int" value="" title="Integer Value" class="textbox is_int min=-60 max=30"  /></td>
</tr>
<tr>
<td>Temperatur (Float number)<br />
<font color="#006699">isFloat</font></td>
<td><input name="temperature" type="text" class="textbox is_float" title="Temperature" /></td>
</tr>
<tr>
<td>US Phone<br />
<font color="#006699">isUSPhone</font></td>
<td><input name="user_p_phone" type="text" class="textbox is_us_phone" id="user_p_phone" /></td>
</tr>
<tr>
<td>International Phone<br />
<font color="#006699">isIntPhone</font></td>
<td><input name="user_r_phone" type="text" class="textbox is_int_phone" id="user_r_phone" /></td>
</tr>
<tr>
<td>URL<br />
<font color="#006699">isURL</font></td>
<td><input name="user_www" type="text" class="textbox is_url" id="user_www" /></td>
</tr>
<tr>
<td>Date of birth<br />
<font color="#006699">isDate=%m/%d/%Y </font><br /></td>
<td><input name="user_bdo" type="text" class='textbox is_date format=%d/%m/%Y' id="user_bdo" /></td>
</tr>
<tr>
<td>US Zip<br />
<font color="#006699">isUSZip</font></td>
<td><input name="user zip" type="text" class="textbox is_us_zip" title="Your Zip" /></td>
</tr>
<tr>
<td>User Name (AJAX test)<br />
<font color="#006699">isAjax=http://www...</font> <br />
<br /></td>
<td><input name="user_name" type="text" class="textbox is_ajax url=test_ajax.php?ajax=1" title="User Nick Name"/>
<br />
enter here &quot;test&quot; for check </td>
</tr>
<tr>
<td>Upload  File<br />
<font color="#006699">required </font>and/or<font color="#006699"> ext=xxx,yyy</font> </td>
<td><input name="user_avatar" type="file" class="textbox ext=images" /></td>
</tr>
<tr>
<td>Regular Expression<br />
<font color="#006699">regex=/\d{2,3)%/</font></td>
<td><input type="text" name="test_regular_exp" id="textfield" class="textbox regex=/\d{2,3}%/" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="Submit" type="submit" class="button" value="Submit" /></td>
</tr>
</table></td>
<td valign="top">&nbsp;</td>
</tr>
</table>
</form>
<table width="900" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr>
    <td width="50%">Validation Tags</td>
    <td width="50%">Install</td>
  </tr>
  <tr>
    <td valign="top"><table border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>required<br />
        </b>req</td>
        <td valign="top" bgcolor="#FFFFFF">Is required field. Work on text, file, radio, select controls<br />
          Optional:<br />
          <i>default - </i> Default value for select control<br />
<br /><small>
          &lt;input type=&quot;text&quot; name=&quot;tst&quot; class=&quot;req&quot; /&gt;<br />
          <br />
          &lt;input type=&quot;radio&quot; name=&quot;gender&quot; value=&quot;Male&quot; class=&quot;req&quot;/&gt;<br />
          &lt;input type=&quot;radio&quot; name=&quot;gender&quot; value=&quot;Female&quot; /&gt;<br />
          <br />
          &lt;select name=&quot;state&quot; class=&quot;req default=--&quot;&gt;<br />
&nbsp;&nbsp;          &lt;option value=&quot;--&quot;&gt;-- Select state-- &lt;/option&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;option value=&quot;CA&quot;&gt;California&lt;/option&gt;<br />
&nbsp;&nbsp;...<br />
&lt;/select&gt;</small></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>minlen</b><br /></td>
        <td valign="top" bgcolor="#FFFFFF">Check minimum length of string</td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>maxlen</b></td>
        <td valign="top" bgcolor="#FFFFFF">Check maximum lenght of string</td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>isInt</b><br />
          is_int</td>
        <td valign="top" bgcolor="#FFFFFF">Is integer field</td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>isFloaf<br />
        </b>is_float</td>
        <td valign="top" bgcolor="#FFFFFF">Is float number</td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>min</b></td>
        <td valign="top" bgcolor="#FFFFFF">Check minimal value of field</td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>max</b></td>
        <td valign="top" bgcolor="#FFFFFF">Check maximal value of field</td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>isDate<br />
        </b>is_date</td>
        <td valign="top" bgcolor="#FFFFFF">Check date<br />
          Optional:<br />
            <i>format</i> -Date format (where %m - month, %d - day, %Y - year)<br />
            <br />
            <small>isDate=%Y/%m/%d, <i>or</i><br />
              isDate format=%m-%d-%Y</small></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>ext</b></td>
        <td valign="top" bgcolor="#FFFFFF">Allowed file extensions for file upload fields (short values: images, docs, video)<br />
            <br />
<small>&lt;input type=&quot;file&quot; name=&quot;userfile&quot; class=&quot;req ext=images&quot; /&gt;</small><br /></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>isEmail<br />
        </b>is_email</td>
        <td valign="top" bgcolor="#FFFFFF">Check email</td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>isPassword</b><br />
          isPass<br />
          is_pass</td>
        <td valign="top" bgcolor="#FFFFFF">Check password field<br />
          Optional:<br />
          <i>passConf - </i>Password confirmation field name/ID<br />
          <i>passLen</i> - Check minimal password length<br />
          <i>passChars</i> - Allowed password chars<br />
          <br />
          <small>isPass passConf=conf_id passLen=6 passChars=0-9a-zA-Z</small></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>isURL<br />
        </b>is_url</td>
        <td valign="top" bgcolor="#FFFFFF">Check URL string (IP also supported)</td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>isUSZip</b><br />
          isZip<br />
          is_zip</td>
        <td valign="top" bgcolor="#FFFFFF">Check US Zip postal code</td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>isUSPhone</b><br />
          is_us_phone</td>
        <td valign="top" bgcolor="#FFFFFF">Check US phone number</td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>isIntPhone</b></td>
        <td valign="top" bgcolor="#FFFFFF">Check international phone number (+7-908-796-47-81)</td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>regex</b></td>
        <td valign="top" bgcolor="#FFFFFF">Check value by custom regular expression<br />
            <small>&lt;input type=&quot;text&quot; name=&quot;test&quot; class=&quot;regex=/^Bob.*/&quot; /&gt;</small><br /></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>isAjax<br />
        </b>is_ajax<br />
          ajax</td>
        <td valign="top" bgcolor="#FFFFFF">Check value by AJAX request<br />
          <small>&lt;input type=&quot;text&quot; name=&quot;username&quot; class=&quot;ajax&quot; /&gt;<br />
          <i> &nbsp;&nbsp;request address is same page/script,</i><br />
          or<br />
          &lt;input type=&quot;text&quot; name=&quot;username&quot; class=&quot;ajax=checkuser.php&quot; /&gt;<br />
          <i>&nbsp;&nbsp;request address is checkuser.php</i><br />
          <br />
          <i> You can check $_REQUEST['validator_ajax'] and $_REQUEST[&lt;field_name&gt;] and return JSON object:<br />
{success: false, error: &quot;Error message&quot;} or {success: true}</i></small></td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"><b>isCreditCard<br />
        </b>isCC</td>
        <td valign="top" bgcolor="#FFFFFF">Check credit card number and expiration date<br />
          Requered:<br />
          <i>ccNum</i> - Credit card number field name/ID<br />
          <i>ccExpMont (ccM)</i> - Expiration month field name/ID<br />
          <i>ccExpYear (ccY)</i> - Expiration year name/ID<br />
          <br /><small>
          &lt;select name=&quot;cc_type&quot; class=&quot;isCC ccNum=cc_num ccM=cc_exp_month ccY=cc_exp_year&quot;&gt;<br />
          &nbsp;&nbsp;&lt;option value=&quot;V&quot;&gt;Visa&lt;/option&gt;<br />
          &nbsp;&nbsp;&lt;option value=&quot;M&quot;&gt;Mastercard&lt;/option&gt;<br />
          &nbsp;&nbsp;...<br />
          &lt;/select&gt;<br />
          &lt;input type=&quot;text&quot; name=&quot;cc_num&quot; /&gt;<br />
          &lt;select name=&quot;cc_exp_month&quot;&gt;<br />
          &nbsp;&nbsp;&lt;option value=&quot;01&quot;&gt;Jan&lt;/option&gt;<br />
          &nbsp;&nbsp;&lt;option value=&quot;02&quot;&gt;Feb&lt;/option&gt;<br />
          &nbsp;&nbsp;...<br />
          &lt;/select&gt;<br />
          &lt;select name=&quot;cc_exp_year&quot;&gt;<br />
&nbsp;&nbsp;&lt;option value=&quot;2007&quot;&gt;07&lt;/option&gt;<br />
&nbsp;&nbsp;&lt;option value=&quot;2008&quot;&gt;08&lt;/option&gt;<br />
&nbsp;&nbsp;...<br />
&lt;/select&gt;<br />
</small></td>
      </tr>
      
    </table></td>
    <td valign="top"><ol>
      <li>Insert code to head: <br />
          <small><br />
&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;validator.js&quot;&gt;&lt;/script&gt;</small><br />
        <br />
      </li>
      <li>Set language (optional):<br />
          <br />
          <small>&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;validator.js&quot;<b> lang=&quot;ru&quot;</b>&gt;&lt;/script&gt;<br />
          <br />
or<br />
<br />
&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;<br />
&lt;!--<br />
var validator_lang = &quot;ru&quot;;<br />
--&gt;<br />
&lt;/script<font size="2">&gt;</font><br />
&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;validator.js&quot;&gt;&lt;/script&gt;</small><br />
        <br />
      </li>
      <li>Use this code for autochecking:<br />
        <small><br />
&lt;form  method=&quot;post&quot; action=&quot;&quot; <strong>class=&quot;autoCheck&quot;</strong>&gt;...&lt;/form&gt;</small><br />
          <br />
      </li>
      <li>Use &quot;class&quot; &amp; &quot;title&quot; attributes to setup validation:<br />
        <small><br />
        &lt;input type=&quot;text&quot; name=&quot;email&quot; title=&quot;Your email&quot; class=&quot;isEmail&quot; /&gt;<br />
&lt;input type=&quot;text&quot; name=&quot;username&quot; title=&quot;Tour Nick name&quot; class=&quot;isAjax&quot; /&gt;<br />
...<br />
        </small><br />
      </li>
      <li>Use  &quot;errors&quot; element on the page (optional):<br />
          <br />
          <small>&nbsp;&nbsp;&lt;div id=&quot;errors&quot;&gt;&lt;/div&gt;</small></li>
    </ol></td>
  </tr>
</table>
</body>
</html>
